<template>
  <div class="success-password">
    <div class="box">
      <div class="label">修改密码</div>
        <el-form ref="pwdForm" :model="pwdForm" :rules="rules">
          <el-form-item prop="password" label="新密码：">
              <el-input v-model="pwdForm.password" placeholder="请输入密码" auto-complete="off" type="text" size="meduim"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="medium" class="confrim-btn" @click="handleBtn('pwdForm')">确认修改</el-button>
    </div>

  </div>
</template>

<script>
import { forgetPwd } from "@/api/login.js";
import { pwdCheck } from "@/utils/validate.js"
export default {
  data() {
    return {
      pwdForm: {
        password: "",
      },
      rules: {
        password: [{ required: true, message: "请输入密码", trigger: "blur" }, { required: true, validator: pwdCheck }],
      },
    };
  },
  methods: {
    //确认修改
    handleBtn(form) {
      let userName = this.$route.params.username;
      let phone = this.$route.params.phone;
      let code = this.$route.params.code;
      let password = this.pwdForm.password;
      this.$refs[form].validate((valid) => {
        if (valid) {
          forgetPwd({ userName, phone, code, password }).then((res) => {
            if (res.success) {
              this.$message.success("修改密码成功");
              this.$router.push("/login");
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.success-password {
  // background-color: #ddd;
  height: 100%;
  // overflow-y: auto;
  .box{
    width: 800px;
    height: 400px;
    border: 1px solid #eee;
    margin: 10% auto;
    position: relative;

    .label{
      margin: 76px 0 20px;
      text-align: center;
      font-weight: 500;
      color: #1A2035;
      font-size: 24px;
    }
    .el-form {
      ::v-deep.el-form-item {
        margin-bottom: 20px !important;
      }

      ::v-deep.el-form-item__label {
        width: 240px;
        margin-top: 5px;
      }

      ::v-deep.el-form-item__content {
        margin: 0 240px;
      }
    }
    .confrim-btn {
      width: 320px;
      height: 48px;
      margin: 0 240px;
      margin-top: 79px;
    }
  }
  // h4 {
  //   font-size: 16px;
  //   text-align: center;
  //   font-weight: 700;
  //   margin-top: 110px;
  //   margin-bottom: 24px;
  // }

  // .pwd {
  //   width: 50%;
  //   margin-left: 25%;
  //   background-color: #fff;

  //   .pwd-item {
  //     text-align: center;
  //     padding-top: 90px;

  //     // .el-form-item__content {
  //     //   width: 30%;
  //     //   margin-left: 37.5% !important;
  //     // }
  //     ::v-deep .el-form-item__error {
  //       padding-left: 353px;
  //     }
  //   }

  //   .pwd-input {

  //     // display: flex;
  //     // justify-content: center;
  //     span {
  //       margin-right: 5px;
  //     }

  //     .el-input {
  //       width: 320px;
  //     }
  //   }

  //   .confrim-btn {
  //     width: 320px;
  //     margin-left: 36%;
  //     margin-bottom: 90px;
  //   }
  // }
}
</style>